<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="storeName" label="商家名称" width="180">
      </el-table-column>
      <el-table-column prop="masterPhone" label="商家电话" width="180">
      </el-table-column>
      <el-table-column prop="storeLogo" label="商家logo">
        <template #default="props">
          <div>
            <el-image
              style="width: 100px; height: 100px"
              :src="props.row.storeLogo"
              fit="contain"
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="storeType" label="商家类型"> </el-table-column>
      <el-table-column prop="masterName" label="负责人名称"> </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"> </el-table-column>

      <el-table-column prop="createDate" label="商家地址"> </el-table-column>
      <el-table-column prop="updateDate" label="申请时间"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="paaOrders(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>

    <!-- 弹窗 -->
    <el-dialog
      title="订单详情"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <el-descriptions :column="3" border>
        <el-descriptions-item
          label="商家名称"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ newData.storeName }}</el-descriptions-item
        >
        <el-descriptions-item label="商家类型">
          <el-button type="primary" plain> {{ storeType }}</el-button>
          <!-- {{ storeType }} -->
          <!-- <el-input v-model="newData.carPlate"></el-input> -->
        </el-descriptions-item>
        <!-- <el-descriptions-item label="商家logo">{{
          newData.storeLogo
        }}</el-descriptions-item> -->
        <el-descriptions-item label="商家logo">
          <el-image
            style="width: 100px; height: 100px"
            :src="items"
            fit="contain"
            v-for="(items, index) in newData.frontDoor"
            :key="index"
            :preview-src-list="newData.frontDoor"
          ></el-image>
        </el-descriptions-item>

        <el-descriptions-item label="商家地址">
          {{ newData.address }}
        </el-descriptions-item>
        <el-descriptions-item label="商家电话">
          {{ newData.masterPhone }}
        </el-descriptions-item>

        <el-descriptions-item label="商家门头">
          <el-image
            style="width: 100px; height: 100px"
            :src="items"
            fit="contain"
            v-for="(items, index) in newData.frontDoor"
            :key="index"
            :preview-src-list="newData.frontDoor"
          ></el-image>
        </el-descriptions-item>

        <el-descriptions-item label="营业执照">{{
          newData.orderMoney
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{
          newData.masterName
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人号码">{{
          newData.masterPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="业务员姓名">{{
          newData.serveName
        }}</el-descriptions-item>
        <el-descriptions-item label="业务员号码">{{
          newData.servePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人号码">{{
          newData.masterPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{ newData.createDate }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger">驳回</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createDate">通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      tableData: [],
      newData: {},
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      storeType: "",
    };
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    getMessage() {
      this.$http
        .get(
          `/merchant/getVerifyMerchants?pageNum=${this.query.pageNum}&&pageSize=${this.query.pageSize}`
        )
        .then((res) => {
          this.tableData = res.data.object.list;
          this.query.total = res.data.object.total;
          console.log(res);
        });
    },
    handleCurrentChange: function (pageNum) {
      this.query.pageNum = pageNum;
      this.getMessage();
    },
    handleSizeChange: function (pageSize) {
      this.query.pageSize = pageSize;
      this.getMessage();
    },
    paaOrders: function (data) {
      this.centerDialogVisible = true;
      // data.merchantLicenseImg = JSON.parse(data.merchantLicenseImg);
      this.newData = data;
      //   console.log(this.newData);
      this.storeType = data.storeType;
      if (this.storeType == 2) {
        this.storeType = "汽车4s店";
      }
      console.log(this.storeType);
    },
    createDate() {
      this.$http.get("/merchant/syncValid?storeType='1'").then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  margin-left: 10px;
}
</style>
